import React, { Component } from 'react'
import { View, ScrollView, Button } from '@tarojs/components';
import { AtTabs, AtTabsPane, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton } from 'taro-ui';
import Card from '../../components/card';
import baseNavBar from "../../layout/baseNavBar";

import './index.scss'

@baseNavBar('行程查询')
export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      current: 0,
      carModal: {
        show: false,
        detail: {}
      },
      manModal: {
        show: false,
        detail: {}
      },
      carList: [
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
        { price: 80, start: '郑州', end: '安阳', points: ['开封', '鹤壁', '濮阳', '清丰'], startTime: '2020年10月15日 09:00', capacity: 3, phone: 17637279965, full: false },
      ],
      manList: [
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
        { start: '郑州', end: '安阳', startTime: '2020 年10月 15 日 09:00', phone: 17637279962 },
      ]
    }
    this.static = {
      tabList: [{ title: '人找车' }, { title: '车找人' }]
    }
  }
  componentWillMount () { }
  componentDidMount () { }
  componentWillUnmount () { }
  componentDidShow () { }
  componentDidHide () { }

  switchTab(e) {
    this.setState({ current: e })
  }
  handleCarClick(item) {
    this.setState({ carModal: { show: true, detail: item } })
  }
  handleManClick(item) {
    this.setState({ manModal: { show: true, detail: item } })
  }

  render () {
    const { carList, manList, current, carModal, manModal } = this.state;
    return (
      <View className="search-page">
        <AtTabs current={current} tabList={this.static.tabList} onClick={this.switchTab.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <ScrollView
              className="box"
              scrollY
              scrollWithAnimation
              // lowerThreshold={Threshold}
            >
              {/* 列表 */}
              {carList.map(item => <Card data={item} onClick={() => this.handleCarClick(item)} />)}
            </ScrollView>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <ScrollView
              className="box"
              scrollY
              scrollWithAnimation
              // lowerThreshold={Threshold}
            >
              {/* 列表 */}
              {manList.map(item => <Card
                data={item}
                onClick={() => this.handleManClick(item)}
              />)}
            </ScrollView>
          </AtTabsPane>
        </AtTabs>
        {/* 人找车详情弹窗 */}
        <AtModal isOpened={carModal.show}>
          <AtModalHeader>行程详情</AtModalHeader>
          <AtModalContent>
            <Card data={carModal.detail} showPhone />
            <AtButton type="primary" size="small">该车已坐满</AtButton>
            <AtButton type="primary" size="small">举报虚假报价</AtButton>
          </AtModalContent>
          <AtModalAction>
            <Button onClick={() => this.setState({ carModal: { show: false, detail: {} } })}>取消</Button>
          </AtModalAction>
        </AtModal>
        {/* 车找人详情弹窗 */}
        <AtModal isOpened={manModal.show}>
          <AtModalHeader>行程详情</AtModalHeader>
          <AtModalContent>
            <Card data={manModal.detail} showPhone />
          </AtModalContent>
          <AtModalAction>
            <Button onClick={() => this.setState({ manModal: { show: false, detail: {} } })}>取消</Button>
          </AtModalAction>
        </AtModal>
      </View>
    )
  }
}
